<template lang="pug">
  .select-Time(ref='selectTime')
    div(v-if='needTitle')
      label.select-Time-Label {{title}}
      .select-Time-Span :
    .select-time-box
      .select-time-box-view
        .time-calendar-view(@click='showMinCalendar()')
          span.padding-l16(v-if='!selectTime', :style="useTimeCss") {{useTime}}
          span.padding-l16(v-else, :style='timeCss') {{selectTime}}
          i.iconfont.icon-rili.icon-color
          SelectCalendar.select-calendar(:isShow='timeShow', :topCss='topCss', :timeIsShow='timeIsShow', :index='0',
          @changeOption='changeTime', @closeBox='timeShow = false')
</template>

<script>
import SelectCalendar from './SelectCalendar'

export default {
  data () {
    return {
      selectTime: '',
      timeShow: false
    }
  },
  props: {
    title: {
      type: String
    },
    useTime: {
      type: String,
      default: '选择时间'
    },
    needTitle: {
      type: Boolean,
      required: false,
      default: true
    },
    width: {
      type: String,
      required: false,
      default: '300px'
    },
    height: {
      type: String,
      required: false,
      default: '40px'
    },
    topCss: {
      type: String,
      required: false
    },
    timeCss: {
      type: String,
      required: false
    },
    useTimeCss: {
      type: String,
      required: false
    },
    timeIsShow: {
      type: Boolean,
      required: false,
      default: true
    }
  },
  methods: {
    changeTime (val) {
      this.selectTime = val
      this.timeShow = false
      this.$emit('selectOption', val)
    },
    showMinCalendar () {
      this.timeShow = !this.timeShow
      event.stopPropagation()
    }
  },
  components: {
    SelectCalendar
  },
  mounted () {
    this.$refs.selectTime.style.width = this.width
    this.$refs.selectTime.style.height = this.height
  },
  created () {
    document.addEventListener('click', (e) => {
      if (this.$refs.selectTime && !this.$refs.selectTime.contains(e.target)) {
        this.timeShow = false
      }
    }, true)
  }
}
</script>

<style scoped lang="stylus">

  .select-time
    display flex
    font-size 12px !important
    align-items baseline

  .select-time-label
    text-align justify
    height 100%
    color #303030
    text-align-last justify
    display inline-block
    width 20%

  .select-time-span
    display inline-block
    height 100%
    text-align left
    width 3%

  .select-time-box
    display inline-block
    width 100%
    height 100%

  .select-time-box-view
    display flex
    width 100%
    height 100%
    cursor pointer

  .time-calendar-view
    height 100%
    text-align right
    color #5e5e5e
    border 1px solid gainsboro
    display flex
    justify-content space-between
    align-items center
    width 100%
    font-size 14px
    position relative
    border-radius 3px

    span
      padding-left: 9px
      &:empty::before
        color: #b9b9b9
        content: attr(placeholder)

    i
      margin-right 10px

  .time-calendar-view i
    color #1587cd
    line-height 40px
    font-size 20px

  .time-calendar-middle-view
    margin 20px 3%
    border 1px solid #cbcbcc
    height 0
    width 3%

</style>
